<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框</title>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style type="text/css">
			/*
			 三角形的画法
			   1.知道三角形的方向，假设三角形朝上，要用到底边
			   2.量宽度，三角形的高，三角形的底边的一半
			   3.将三角形腰的两条边设置为透明颜色即可。
			 * */
			.box1{
				width: 0px;
				height: 0px;
				border-left:50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid #00ff00;
				
			}
			/*
			 solid 实线
			 dottel 圆点
			 dashed  虚线
			 double 双实线
			 groove 带层次的边框
			 
			 * */
			.box2{
				width: 200px;
				height: 100px;
				border: 4px solid red;
				/*border-radius: 100px;*/
				border-top-left-radius: 50px;
			}
			.buddle{
				width: 200px;
				height: 100px;
				background-color: blue;
				border-radius: 20px;
				
			}
			.buddle::after{
				content: "";
				width: 0;
				display: block;
				margin-left: 10px;
				border-top: 10px solid blue;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
			/*
			 颜色
			 1. 16进制写法 #ff0000 ===#f00
			 2. 英文单词 (transparent透明颜色)
			 3. rgb(255,0,0)
			 4. rgba(255,0,0,0.5) a代表透明度
			 * */
			.iconfont{
				font-size: 40px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="" class="box1">
			
		</div>
		<div id="" class="box2">
			
		</div>
		<!--对话框气泡-->
		<div id="" class="buddle">
			哈哈
			<div id="">
				
			</div>
		</div>
		<i class="iconfont icon-liebiao">列表</i>
	</body>
</html>
